<%@page import="com.hunk.utils.PropertyHelper"%>
<%@page import="java.util.*"%>
<%@page import="java.net.URL"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	PropertyHelper ph = PropertyHelper.getInstance();
	Set<Object> keys = ph.getProperties().keySet();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.stable th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    border-color: black;
    border-top: none;
    border-left: none;
}

.stable th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
	border-top: none;
}
.stable td, .stable th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

body {
    width: 600px;
    margin: 40px auto;
    font-family: 'trebuchet MS', 'Lucida sans', Arial;
    font-size: 20px;
    color: #444;
}

.stable {
	width: 98%;
	border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;        
}

.stable tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}  

.choose {
    background: yellow;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
} 

.stable td {
	padding-left: 10px;
}

.stable td:first-child {
	border-left:none;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*
function trClick2() {
	var s = $(event.srcElement);	
	if (s.className != "choose") {
		s.addClass("choose");
	} else {
		s.removeClass("choose");
	}
}
*/
function trClick() {
	if (this.className != "choose") {
		$(this).addClass("choose");
		var key = $(this).children('td').eq(0).html();
		var value = $(this).children('td').eq(1).html();
		$("#key").val(key);
		$("#values").val(value);
	} else {
		$(this).removeClass("choose");
	}
}
// add json object to table by ajax
function init() {
	<%for (Object key : keys) {%>	
	var table = $("#ssss").get(0);
	var length = table.rows.length;
	var row = table.insertRow(length);
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
		
	cell1.innerHTML = "<%=key %>";
	cell2.innerHTML = "<%=ph.getString(key.toString())%>";
	row.onclick= trClick;
	<%}%>
}
function sb() {
	var form = document.getElementById("fo");
	if($("#key").attr("value") != "" && $("#values").attr("value") != "") {
		form.action="edit";
		form.submit();
	}
}
$(document).ready(function(){
	init();
});
</script>
</head>
<body style="width:900px">
<div>
	<table id="ssss" style="widows: 100%" class="stable" cellspacing="0">
		<thead>
			<tr style="background-color: #FAFAD2">
				<th>key</th>
				<th>value</th>
			</tr>
		</thead>		
	</table>
</div>
<div style="margin-top: 50px">
	<form id="fo" action="" method="post">
		<table style="widows: 100%" class="stable" cellspacing="0">
		<tr >
			<td colspan="2" style="text-align: center">Form</td>
		</tr>
		<tr>
			<td>key</td>
			<td><input type="text" id="key" name="key"></td>
		</tr>
		<tr>
			<td>value</td>
			<td><input type="text" id="values" name="values"></td>
		</tr>
		<tr>
			<td colspan="2"><button onclick="sb()">Submit</button></td>
		</tr>	
		</table>
	</form>
</div>
<div></div>
</body>
</html>